<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent {
            border: 1px solid red;
        }

        .box {
            height: 100px;
            width: 100px;
            background: green;
            float: left;
            color: #ffffff;
        }

        /*.box:after{*/
        /*content:'这是伪类生成的内容';*/
        /*}*/

        /* ie6x下的清除方法*/
        .clearfix {
            *zoom: 1;
        }

        /*由于after伪类的内容默认是一个行内元素，行内元素的clear无效，所以这样写*/
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<!--
    清除浮动的方法：
                1、clear指令；
                2、给父级添加高度(只是表面清除，实际不解决问题)
                     有的时候是不能给父级添加高度的，这种方法用不了，（父级没有高度的情况下）
                3、inlien-block，高度都由内容撑开；
                     具有与上一个方法一样的问题，同时加了之后没有办法在x轴居中了；
                4、overflow：hidden；
                     如果自己有定位的话，且定位超出了父级的范围，那样的话就看不到了，所以不能加这个命令；
                5、空标签（不赞成使用）
                     空标签是没有内容的，但是他的作用是用来清除浮动的，所以不符合行为、样式、结构分离的标准；
                     ie6下标签是有一个最小高度的，是19px，解决后也会有2px的偏差；
                6、br清除浮动
                     与上面的问题是一致的；
                7、after伪类清除浮动（目前最主流的方法），无副作用；
                     after             代表选择到的元素的内容的最后面；
                                        after伪类的内容默认是一个行内元素
                     content           设置的内容
-->
<div class="parent clearfix">
    <div class="box"></div>
</div>

</body>
</html>